<script lang="ts" setup>
import ProductBox from "../Common/ProductBox.vue";
import { ref } from "vue";
const value1 = ref("所有产品");

const options = [
  {
    name: "所有产品",
  },
  {
    name: "小明",
  },
  {
    name: "小红",
  },
];

const handleChange = (value: string) => {
  console.log(`selected ${value}`);
};

const dataSource = ref([
  {
    key: "1",
    name: "Mike",
    size: 32,
    md5: "10",
    releaseDate: "2022-02-24",
  },
]);

const columns = ref([
  {
    title: "文件名",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "文件大小",
    dataIndex: "size",
    key: "size",
  },
  {
    title: "MD5值",
    dataIndex: "md5",
    key: "md5",
  },
  {
    title: "发布时间",
    dataIndex: "releaseDate",
    key: "releaseDate",
  },
  {
    title: "操作",
    dataIndex: "operation",
    key: "operation",
  },
]);
</script>
<template>
  <div class="pr-5 pl-5">
    <ProductBox title="下载中心">
      <label>
        <p class="mb-5">
          选择产品：
          <a-select ref="select" v-model:value="value1" style="width: 120px" @change="handleChange">
            <a-select-option :value="item.name" v-for="(item, index) in options" :key="index + '_opt'">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </p>
      </label>
      <a-table :scroll="{ x: 1000, }" :dataSource="dataSource" :columns="columns">
        <template #bodyCell="{ column }">
          <template v-if="column.key === 'operation'">
            <div class="flex">
              <a-button type="primary" class="mr-5">修改</a-button>
              <a-button type="primary" danger>删除</a-button>
            </div>
          </template>
        </template>
      </a-table>
    </ProductBox>
  </div>
</template>
<style lang="scss" scoped></style>
